<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="交接班详情" fixed :border="false" height="88rpx" background-color="#ffffff" left-icon="left"
      @clickLeft="onClickLeft"></uni-nav-bar>
    <view class="main">
      <view class="time marClass">时间：{{ obj.startTime | parseTime('YYYY-MM-DD HH:mm:ss') }} 至 {{
        obj.finishTime |
        parseTime('YYYY-MM-DD HH:mm:ss') }}</view>
      <view class="flexBox marClass">
        <view class="flexItem1">
          <view class="one">累计单数</view>
          <view class="one">{{ obj.totalNumber }}</view>
        </view>
        <view class="flexItem1">
          <view class="one">累计销售额</view>
          <view class="one">{{ obj.totalSales }}元</view>
        </view>
      </view>
      <view class="flexBox marClass borderClass">
        <view class="flexItem2">
          <view class="one">累计退款</view>
          <view class="one">{{ obj.totalRefund }}元</view>
        </view>
        <view class="flexItem2">
          <view class="one">累计优惠</view>
          <view class="one">{{ obj.totalDiscount }}元</view>
        </view>
        <view class="flexItem3">
          <view class="one">累计数字资产发放</view>
          <view class="one">{{ obj.totalToken }}</view>
        </view>
      </view>
      <view class="time" style="margin-bottom: 20rpx;">钱箱初始金额：{{ obj.initMoney }}元</view>
      <view class="time marClass">钱箱剩余金额：{{ obj.balance }}元</view>
      <view class="time">销售金额：{{ obj.totalSales }}元</view>
      <view class="flexBox marClass borderClass">
        <view class="flexItem4">线上支付：{{ obj.onlinePay }}元</view>
        <view class="flexItem4">现金支付：{{ obj.cashPay }}元</view>
      </view>
      <view class="time">退款金额：{{ obj.totalRefund }}元</view>
      <view class="flexBox">
        <view class="flexItem4">微信转账：{{ obj.wechatRefund }}元</view>
        <view class="flexItem4">支付宝转账：{{ obj.alipayRefund }}元</view>
      </view>
      <view class="time marClass borderClass">现金退款：{{ obj.cashRefund }}元</view>
      <view class="time">优惠合计金额：{{ obj.totalDiscount }}元</view>
    </view>
  </view>
</template>

<script>
import { reqShiftDetail } from '@/apis/member.js'
export default {
  name: "InventoryInfo",
  data() {
    return {
      obj: {},
      id: ''
    }
  },
  onLoad(params) {
    this.id = params?.id
    this.reqShiftDetail()
  },
  onShow() {
  },
  methods: {
    // 供应链 
    async reqShiftDetail() {
      const res = await reqShiftDetail({ id: this.id })
      if (res.code === 200) {
        this.obj = res.data
        console.log('res:', res.data);
      }
    },

  }
}
</script>
<style>
page {
  background: #fff;

}
</style>
<style lang="scss" scoped >
.content {
  height: 100vh;
  background-color: #fff;

}

view {
  box-sizing: border-box;
}

.main {
  height: calc(100% - 88rpx);
  padding: 20rpx;
  font-size: 28rpx;

  .flexBox {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    line-height: 70rpx;
    // margin-bottom: 30rpx;
  }

  .flexItem1 {
    padding-top: 30rpx;
    height: 160rpx;
    line-height: 50rpx;
    width: 40%;
    border: 1px solid #eee;
    text-align: center;
    color: #fff;
    background-color: #007acc;
    border-radius: 6rpx;
  }

  .flexItem2 {
    padding-top: 30rpx;
    height: 160rpx;
    line-height: 50rpx;
    width: 28%;
    border: 1px solid #eee;
    color: #fff;
    text-align: center;
    background-color: #007acc;
    border-radius: 6rpx;
  }

  .flexItem3 {
    padding-top: 30rpx;
    height: 160rpx;
    line-height: 50rpx;
    width: 35%;
    border: 1px solid #eee;
    color: #fff;
    text-align: center;
    background-color: #007acc;
    border-radius: 6rpx;
  }

  .flexItem4 {
    width: 50%;
    text-align: left;
  }

  .marClass {
    margin-bottom: 30rpx;
  }

  .borderClass {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20rpx;
  }
}
</style>
